<template>
  <div class="task-container">
    <div class="tab-list">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="我负责" name="1">
          <div v-show="emptyListFlag&&!taskLoading">
            <div class="task-left clearfix">
							<el-scrollbar class="scroll-height-left">
								<component :is="leftList" :taskList="taskList" @taskDetail="taskDetail"></component>
							</el-scrollbar>
            </div>
            <div class="task-right clearfix" ref="taskRight" v-show="emptyListFlag">
              <div class="task-right-header">
                <span>任务编号：{{taskNo}}</span>
              </div>
              <div class="task-right-content">
								<el-scrollbar class="scroll-height">
									<div class="right-content-container clearfix">
										<component :is="centerList" ref="taskInfo1" @getList="getList" :taskInfo="taskInfoList" :showDetailAttach="1"></component>
										<component :is="rightList" :taskInfo="taskInfoList"></component>
									</div>
								</el-scrollbar>
              </div>
            </div>
          </div>
          <div v-show="!emptyListFlag&&!taskLoading">
            <component :is="emptyTask"></component>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我协同" name="2">
          <div v-show="emptyListFlag&&!taskLoading">
            <div class="task-left clearfix">
							<el-scrollbar class="scroll-height-left">
								<component :is="leftList" :taskList="taskList" @taskDetail="taskDetail"></component>
							</el-scrollbar>
            </div>
            <div class="task-right clearfix" ref="taskRight" v-show="emptyListFlag">
              <div class="task-right-header">
                <span>任务编号：{{taskNo}}</span>
              </div>
              <div class="task-right-content">
								<el-scrollbar class="scroll-height">
									<div class="right-content-container clearfix">
										<component :is="centerList" ref="taskInfo2" @getList="getList" :taskInfo="taskInfoList" :showDetailAttach="2"></component>
										<component :is="rightList" :taskInfo="taskInfoList"></component>
									</div>
								</el-scrollbar>
              </div>
            </div>
          </div>
          <div v-show="!emptyListFlag&&!taskLoading">
            <component :is="emptyTask"></component>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我创建" name="3">
          <div v-show="emptyListFlag&&!taskLoading">
            <div class="task-left clearfix">
							<el-scrollbar class="scroll-height-left">
								<component :is="leftList" :taskList="taskList" @taskDetail="taskDetail"></component>
							</el-scrollbar>
            </div>
            <div class="task-right clearfix" ref="taskRight" v-show="emptyListFlag">
              <div class="task-right-header">
                <span>任务编号：{{taskNo}}</span>
                <el-button v-show="taskInfoList.taskdetail.pj_content==''" class="header-btn" @click="dialogtransferVisible = true">重启</el-button>
                <el-button v-show="taskInfoList.taskdetail.pj_content==''" type="primary" class="header-btn" @click="dialogAccessVisible = true">评价</el-button>
              </div>
              <div class="task-right-content">
								<el-scrollbar class="scroll-height">
									<div class="right-content-container clearfix">
										<component :is="centerList" ref="taskInfo3" @getList="getList" :taskInfo="taskInfoList" :showDetailAttach="3"></component>
										<component :is="rightList" :taskInfo="taskInfoList"></component>
									</div>
								</el-scrollbar>
              </div>
            </div>
          </div>
          <div v-show="!emptyListFlag&&!taskLoading">
            <component :is="emptyTask"></component>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--转派dialog-->
    <el-dialog title="重启任务" :visible.sync="dialogtransferVisible" width="420px" class="transfer-dialog" @close="closeTransferDialog">
      <el-form :model="transferForm" :rules="transferRule" ref="transferForm">
        <el-form-item label="重启说明" label-width="80px" prop="explain">
          <el-input type="textarea" v-model="transferForm.explain" auto-complete="off" maxlength="200" placeholder="请输入内容，限字200"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogtransferVisible = false">取 消</el-button>
        <el-button type="primary" @click="transferSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!--评价dialog -->
    <el-dialog title="评价" :visible.sync="dialogAccessVisible" width="420px" class="transfer-dialog" @close="closeAccessDialog">
      <el-form :model="accessForm" :rules="accessRule" ref="accessForm">
        <el-form-item label="评分" label-width="80px" prop="content">
          <el-slider
            v-model="accessForm.score"
            :step="1"
            :max="10"
            show-stops>
          </el-slider>
          <span style="color:#c0c4cc;letter-spacing:0px;position:relative;top:-15px;">满分10分</span>
        </el-form-item>
        <el-form-item label="评论内容" label-width="80px" prop="content" style="margin-top:-20px;">
          <el-input type="textarea" v-model="accessForm.content" auto-complete="off" maxlength="200" placeholder="请输入内容，限字200"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAccessVisible = false">取 消</el-button>
        <el-button type="primary" @click="accessSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<style>
  .clearfix:before,.clearfix:after{
    content:"";
    display:block;
    clear:both;
    height:0;
  }
</style>
<style scoped src="./components/task.css"></style>
<style scoped>
  .transfer-dialog >>> .el-slider__bar{
    background-color:#ff9900;
  }
  .transfer-dialog >>> .el-slider__button{
    border:2px solid #ff9900;
  }
</style>
<script>
  import leftList from './components/list-complate'
  import centerList from './components/detail-complate'
  import rightList from './components/history-complate'
  import emptyTask from './components/emptyTask'
  import {taskList, taskInfo, taskAccess, taskRestart} from '@/api/task'
  export default {
    data () {
			var checkTransferExplain = (rule, value, callback) => {
				if (!(value.trim())) {
					this.transferForm.explain = ''
					return callback(new Error('请输入重启说明'))
				} else {
					callback()
				}
			}
			var checkAccessContent = (rule, value, callback) => {
				if (!(value.trim())) {
					this.accessForm.content = ''
					return callback(new Error('请输入评价内容'))
				} else {
					callback()
				}
			}
      return {
        leftList: leftList,
        centerList: centerList,
        rightList: rightList,
        emptyTask: emptyTask,
        activeName: '1',
        taskList: [],
        taskId: '',
        taskNo: '',
        taskInfoList: {
          taskdetail: {
            attach: [],
            reply_attach: []
          },
          process: {}
        },
        chargeNum: '',
        badge: false,
        emptyListFlag: true,
        taskLoading: true,
        showDetailAttach: false,
        dialogtransferVisible: false,
        dialogAccessVisible: false,
        transferForm: {
          explain: ''
        },
        transferRule: {
          explain: [
            { required: true, validator: checkTransferExplain, trigger: 'blur' },
            { max: 200, message: '长度在200个字符以内', trigger: 'blur' }
          ]
        },
        accessForm: {
          score: 5,
          content: ''
        },
        accessRule: {
          content: [
            { required: true, validator: checkAccessContent, trigger: 'blur' },
            { max: 200, message: '长度在200个字符以内', trigger: 'blur' }
          ]
        }
      }
    },
    created () {
      this.initTask()
      this.getTaskList()
    },
    mounted () {
    },
    methods: {
      // 切换标签页
      handleClick() {
        this.getTaskList()
      },
      getList () {
        this.initTask()
        this.getTaskList()
      },
			initTask () {
				// 刷新任务中心数量
				taskList(Object.assign({}, {'tasktype': 1, 'usertype': 1})).then(response => {
					if (response.data.list.length > 0) {
						this.$store.dispatch('setDealNum', response.data.list.length)
						this.$store.dispatch('setShowDealDot', true)
					} else {
						this.$store.dispatch('setShowDealDot', false)
						this.$store.dispatch('setDealNum', '')
					}
				})
				// 报警任务警示红点是否显示
				taskList(Object.assign({}, {'tasktype': 2, 'usertype': 1})).then(response => {
					if (response.data.list.length > 0) {
						this.$store.dispatch('setShowWarnDot', true)
						return false
					} else {
						taskList(Object.assign({}, {'tasktype': 2, 'usertype': 2})).then(response => {
							if (response.data.list.length > 0) {
								this.$store.dispatch('setShowWarnDot', true)
								return false
							} else {
								taskList(Object.assign({}, {'tasktype': 2, 'usertype': 3})).then(response => {
									if (response.data.list.length > 0) {
										this.$store.dispatch('setShowWarnDot', true)
										return false
									} else {
										this.$store.dispatch('setShowWarnDot', false)
									}
								})
							}
						})
					}
				})
			},
      // 获取任务列表
      getTaskList() {
        this.taskLoading = true
        taskList(Object.assign({}, {'tasktype': 3, 'usertype': this.activeName})).then(response => {
          if (this.activeName === '1') {
            if (response.data.list.length > 0) {
              this.badge = true
              this.chargeNum = response.data.list.length
            } else {
              this.badge = false
            }
          }
          this.taskList = response.data.list
          this.taskLoading = false
          if (this.taskList.length > 0) {
            this.emptyListFlag = true
            this.taskId = response.data.list[0].id
            this.taskDetail(this.taskId)
          } else {
            this.taskInfoList = {
              taskdetail: {
                attach: [],
                reply_attach: []
              },
              process: {}
            }
            this.emptyListFlag = false
          }
        })
      },
      // 获取任务详情
      taskDetail(taskNo) {
        this.taskId = taskNo
        taskInfo(Object.assign({}, {'task_id': this.taskId})).then(response => {
          this.taskInfoList = response.data
          this.taskInfoList.taskdetail.attach_names = JSON.parse(this.taskInfoList.taskdetail.attach_names)
          this.taskInfoList.taskdetail.attach = JSON.parse(this.taskInfoList.taskdetail.attach)
          this.taskNo = this.taskInfoList.taskdetail.task_no
        })
      },
      // 关闭重启弹窗
      closeTransferDialog() {
        this.transferForm = {
          explain: ''
        }
        this.$nextTick(() => {
          this.$refs['transferForm'].clearValidate()
        })
      },
      // 重启确定按钮
      transferSubmit() {
        this.$refs['transferForm'].validate((valid) => {
          if (valid) {
						taskRestart(Object.assign({}, {'task_id': this.taskId, 'remark': this.transferForm.explain})).then(response => {
              this.dialogtransferVisible = false
              this.getList()
              this.$message({
                message: '重启成功',
                type: 'success'
              })
            })
          } else {
            return false
          }
        })
      },
      closeAccessDialog() {
        this.accessForm = {
          score: 5,
          content: ''
        }
        this.$nextTick(() => {
          this.$refs['accessForm'].clearValidate()
        })
      },
      // 评价确定按钮
      accessSubmit() {
        this.$refs['accessForm'].validate((valid) => {
          if (valid) {
						taskAccess(Object.assign({}, {'task_id': this.taskId, 'pj_score': this.accessForm.score, 'pj_content': this.accessForm.content})).then(response => {
              this.dialogAccessVisible = false
              this.taskDetail(this.taskId)
              this.$message({
                message: '评价成功',
                type: 'success'
              })
            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>
